<template>
  <div class="image-setting lp-component-setting">
    <el-tabs v-model="activeName">
      <el-tab-pane label="上传文件" name="first">
        <el-upload
          class="avatar-uploader"
          :action="action"
          :show-file-list="false"
          :headers="{ token }"
          :on-success="handleSuccess">
          <img v-if="componentData.url" :src="componentData.url" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-tab-pane>
      <el-tab-pane label="图片路径" name="second">
        <el-form ref="form" label-width="120px">
          <el-form-item label="URL">
            <el-input v-model="componentData.url"></el-input>
          </el-form-item>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <el-card shadow="never" class="image-jump-info">
      <el-row class="setting-item" type="flex" align="middle"><el-col>
        <el-row>
          <el-col class="item-name" :span="8">链接类型：</el-col>
        </el-row>
        <el-row>
          <el-col class="item-value">
            <el-radio-group v-model="componentData.linkType">
              <el-radio :label="3">商品</el-radio>
              <el-radio :label="1">小程序</el-radio>
              <el-radio :label="2">H5链接</el-radio>
              <el-radio :label="0">无</el-radio>
            </el-radio-group>
          </el-col>
        </el-row>
      </el-col></el-row><el-row class="setting-item" type="flex" align="middle" v-if="componentData.linkType === 3">
       <el-col class="item-name" :span="8">商品：</el-col>
       <el-col class="item-value">
         <el-input type="text" placeholder="请输入商品ID" v-model="componentData.jumpLink"></el-input>
       </el-col>
     </el-row><el-row class="setting-item" type="flex" align="middle" v-if="componentData.linkType === 1">
       <el-col class="item-name" :span="8">小程序:</el-col>
       <el-col class="item-value">
         <el-input type="text" placeholder="请输入小程序页面路径" v-model="componentData.jumpLink"></el-input>
         </el-col>
     </el-row><el-row class="setting-item" type="flex" align="middle" v-if="componentData.linkType === 2">
       <el-col class="item-name" :span="8">H5链接:</el-col>
       <el-col class="item-value">
         <el-input type="text" placeholder="请输入H5链接地址" v-model="componentData.jumpLink"></el-input>
       </el-col>
     </el-row>
    </el-card>
    <el-card shadow="never" style="margin-top: 10px">
      <el-row class="setting-item" type="flex" align="middle">
        <el-col class="item-name" :span="6">宽度：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.width" :show-tooltip="false"></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.width}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle" >
        <el-col class="item-name" :span="6">高度：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.height" :show-tooltip="false"></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.height}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle">
        <el-col class="item-name" :span="6">上边距：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.marginTop" :show-tooltip="false"></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.marginTop}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
      <el-row class="setting-item" type="flex" align="middle" >
        <el-col class="item-name" :span="6">下边距：</el-col>
        <el-col class="item-value" :span="18">
          <el-row type="flex" align="middle">
            <el-col :span="18">
              <el-slider v-model="componentData.marginBottom" :show-tooltip="false" ></el-slider>
            </el-col>
            <el-col :span="6" class="value-right">{{componentData.marginBottom}}px</el-col>
          </el-row>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { config } from '@/utils/config'
import { getToken } from '@/utils/auth'
export default {
  name: 'LpImageSetting',
  title: '图片',
  registerName: 'lp-image',
  props: {
    componentData: {
      type: Object
    }
  },
  data() {
    return {
      activeName: 'first',
      action: config.uploadUrl,
      token: getToken()
    }
  },
  mounted() {

  },
  methods: {
    handleSuccess(res, file) {
      this.componentData.url = res.data.url
      this.$emit('update:componentData', this.componentData)
    }
  }
}

</script>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 128px;
  height: 128px;
  line-height: 128px;
  text-align: center;
}
.avatar {
  width: 128px;
  height: 128px;
  display: block;
}

.avatar-uploader-icon {
  font-size: 20px;
}
.value-right {
  text-align: center;
}
.image-jump-info {
  line-height: 38px;
}
</style>
